import React from "react";
import { CloseIcon } from "../icons/CloseIcon";
import styles from "./Modal.module.css";
import { clsx } from "clsx";

interface ModalProps {
    isOpen: boolean;
    onClose: () => void;
    title?: string;
    children: React.ReactNode;
    variant?: "normal" | "error";
}

export const Modal: React.FC<ModalProps> = ({
    isOpen,
    onClose,
    title,
    children,
    variant = "normal",
}) => {
    if (!isOpen) return null;
    const contentClx = clsx(styles.content, {
        [styles.error]: variant === "error",
    });
    return (
        <div className={styles.overlay}>
            <div className={styles.modal}>
                <div className={styles.header}>
                    {title && <h3 className={styles.title}>{title}</h3>}
                    <button className={styles.closeButton} onClick={onClose}>
                        <CloseIcon size={20} />
                    </button>
                </div>
                <div className={contentClx}>{children}</div>
            </div>
        </div>
    );
};
